<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../fontawesome/css/all.min.css">
    <script src="../js/chat.js"></script>
    <script src="../js/socket.io.js"></script>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <!-- 引入样式 -->
    <link rel="stylesheet" type="text/css" href="../css/chat.css">
    <link rel="stylesheet" type="text/css" href="../css/w3.css">
    <link rel="stylesheet" type="text/css" href="../css/QnA.css">

    
</head>

<style>
    body {
    background-color: #f5feff; /* 浅蓝色 */
}
</style>

<body>

    <!-- 顶部按钮 -->

    <div class="top-buttons">
        <button class="w3-bar-item w3-button" id="smart-assistant-btn">智能助教</button>
        <button class="w3-bar-item w3-button" id="smart-question-btn">智能出题</button>
    </div>


    <!-- 智能助教 -->
    <div class="chat_commento" id="chat-interface">
   
        <div class="chat_middle" id="chat-box">     
        </div>
 
     
        <div class="chat_foot">
            <!-- context -->
            <input type="text" class="w3-bar-item w3-input w3-white w3-border" id="user-input"  style = "width: 75%;border-radius:10px ;margin-left: 2%;" placeholder="请输入问题...(Enter发送)">
            <button style = "background-color:rgb(0, 0, 0);color: #ffffff;font-size: 20px;margin-left:10px;border-radius: 5px;width: 20%;"" class="w3-bar-item  fa fa-paper-plane-o" id="submit-btn"> 提问</button>
        </div>
        
  
    </div>

    <!--智能问答-->
    <div id="new-interface" class="smart-question-container">

        <div id="answer-hint">单击题目区域查看答案！</div>

        <!-- 题目类型选择 -->
        <select class="question-type-select">
            <option value="short-answer">简答题</option>
            <option value="choice">选择题</option>
            <option value="fill-in-the-blank">填空题</option>
        </select>

        <script>
            const questionTypeSelect = document.getElementById('question-type-select');

            // 监听题型选择变化
            if(questionTypeSelect){
                questionTypeSelect.addEventListener('change', function() {
                    if (selectedQuestionType === 'choice') {
                        
                        
                    } else if (selectedQuestionType === 'fill-in-the-blank') {
                       
    
                    } else if (selectedQuestionType === 'short-answer') {
                        
                        
                    }
                });
            }

        </script>


        <!-- 上一题按钮 -->
        <button class="w3-bar-item w3-button" id="prev-btn"><i class="fa fa-chevron-left"></i></button>
        <!-- 下一题按钮 -->
        <button class="w3-bar-item w3-button" id="next-btn"><i class="fa fa-chevron-right"></i></button>
        <!-- 题目展示框 -->
        <div id = 'curQnA1'>
            <div class="question-display">
                <p>智能出题：点击切换按钮自动生成下一题</p>
            </div>
            <!-- 答案展示框 -->
            <div class="answer-display" style="display: none;">
                <p>点击上面切换按钮自动出题!</p>
            </div>
        </div>

    </div>
        
    </div>

    <script>
        // 获取按钮和界面元素
        var ques_data = JSON.parse(localStorage.getItem("content"))

        ques_data = JSON.parse(ques_data)

        var limit_length = ques_data.length




        const smartAssistantBtn = document.getElementById('smart-assistant-btn');
        const smartQuestionBtn = document.getElementById('smart-question-btn');
        const chatInterface = document.getElementById('chat-interface');
        const newInterface = document.getElementById('new-interface');
        const questionDisplay = document.querySelector('.question-display');
        const answerDisplay = document.querySelector('.answer-display');
        const nextBtn = document.getElementById("next-btn");
        const prevBtn = document.getElementById("prev-btn");
        smartAssistantBtn.style.backgroundColor = '#043d6b'
        smartAssistantBtn.style.color = '#ffffff'
        var count = 1
        // 点击智能助教按钮时显示提问界面，隐藏新界面
        smartAssistantBtn.addEventListener('click', function() {
            chatInterface.style.display = 'block';
            newInterface.style.display = 'none';
            smartAssistantBtn.style.backgroundColor = '#043d6b'
            smartAssistantBtn.style.color = '#ffffff'
            smartQuestionBtn.style.backgroundColor = '#ffffff'
            smartQuestionBtn.style.color = '#000000'
        });

        // 点击智能出题按钮时隐藏提问界面，显示新界面
        smartQuestionBtn.addEventListener('click', function() {
            chatInterface.style.display = 'none';
            newInterface.style.display = 'block';
            smartQuestionBtn.style.backgroundColor = '#043d6b'
            smartQuestionBtn.style.color = '#ffffff'
            smartAssistantBtn.style.backgroundColor = '#ffffff'
            smartAssistantBtn.style.color = '#000000'
        });

        // 点击题目下方的空白区域显示答案
        questionDisplay.addEventListener('click', function() {
            answerDisplay.style.display = 'block';
        });

        // 上一题按钮功能
        prevBtn.addEventListener('click', function() {
            let id1 = "curQnA"+count
            let curQnA = document.getElementById(id1)
            let temp_count = count - 1
            let id2 = "curQnA" + temp_count
            let prevQnA = document.getElementById(id2)
            prevQnA.style.display = 'block'
            curQnA.style.display = 'none'
            count = count - 1
           
        });

        // 下一题按钮功能
        nextBtn.addEventListener('click', function() {

            id = "curQnA" + count
            let curQnA = document.getElementById(id);
            curQnA.style.display = 'none';
            
            if(count > limit_length){
                window.alert("数量限制，请重试!")
            }else{
                count = count + 1;
                let temp_id = 'curQnA' + count;
                if(document.getElementById(temp_id)){
                    let nexQnA = document.getElementById(temp_id);
                    nexQnA.style.display = 'block'
                }else{
                    let nexQnA = document.createElement('div');
                    nexQnA.id = 'curQnA' + count;
                    
    
                    let questiondisplay = document.createElement("div");
                    questiondisplay.className = "question-display";
                    let questionp = document.createElement("p");
                    questionp.textContent = ques_data[count - 2].问题;
                    questiondisplay.appendChild(questionp);
    
                    let answerdisplay = document.createElement("div");
                    answerdisplay.className = "answer-display";
                    let answerp = document.createElement("p");
                    answerp.textContent = ques_data[count - 2].答案;
                    answerdisplay.appendChild(answerp);
                    answerdisplay.style.display = 'none'
    
                    questiondisplay.addEventListener('click', function() {
                        answerdisplay.style.display = 'block';
                    });
    
                    nexQnA.appendChild(questiondisplay);
                    nexQnA.appendChild(answerdisplay)
        
                    newInterface.appendChild(nexQnA)
                }

            }
                    
        });
    </script>

</body>
</html>
